<!--
 * @Description: 封装新增和刷新按钮
 * @Date: 2023-04-05 10:09:29
 * @LastEditTime: 2023-04-10 22:57:44
 * @Author: Black
 * @FilePath: \store_admin\src\components\ListHeader.vue
-->

<template>
  <!-- 新增 | 刷新 | 批量删除 | 导出数据 -->
  <div class="flex justify-between mb-3 relative">
    <div>
      <el-button class="btn" v-if="btns.includes('create')" type="primary" size="small"
        @click="$emit('create')">新增</el-button>
      <el-popconfirm v-if="btns.includes('delete')" confirmButtonText="确认" cancelButtonText="取消" title="是否要删除选中记录？"
        @confirm="$emit('delete')" width="200px">
        <template #reference>
          <el-button class="btn1" type="danger" size="small">删除</el-button>
        </template>
      </el-popconfirm>
      <slot name="content"></slot>
    </div>

    <slot></slot>

    <div>
      <el-tooltip v-if="btns.includes('refresh')" effect="light" content="刷新数据" placement="top">
        <el-button size="small" class="btns" @click="$emit('refresh')">
          <el-icon :size="20">
            <Refresh />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip v-if="btns.includes('download')" effect="dark" content="导出数据" placement="top">
        <el-button size="small" class="btns" @click="$emit('download')">
          <el-icon :size="20">
            <Download />
          </el-icon>
        </el-button>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

// 暴露属性, 接受父组件传递的属性值
const props = defineProps({
  layout: {
    type: String,
    default: "create,refresh"
  }
})

const btns = computed(() => props.layout.split(","))

</script>

<style scoped>
.btn {
  @apply bg-violet-300 text-light-50;
  height: 34px;
  width: 55px;
  border-radius: 10px;
  border: none;
  color: #fff;
  cursor: pointer;
}

.btn:hover {
  box-shadow: 0 0 5px rgba(117, 55, 174, 0.502);
}

.btn1 {
  @apply bg-red-300 text-light-50;
  height: 34px;
  width: 55px;
  border-radius: 10px;
  border: none;
  color: #fff;
  cursor: pointer;
}

.btn1:hover {
  box-shadow: 0 0 5px rgba(253, 156, 156, 0.5);
}

.btns {
  height: 34px;
  width: 55px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}
</style>